<!--
 * 单元格
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-cell" :class="classes" :style="styles" :hover-class="hoverClass" @tap="handleClick">
        <view class="pure-cell-wrapper">
            <!-- Icon -->
            <view class="pure-cell-icon" v-if="$slots.icon || icon">
                <slot name="icon" v-if="$slots.icon"></slot>
                <pure-icon :name="icon" :mode="iconMode" v-else></pure-icon>
            </view>

            <!-- Body -->
            <view class="pure-cell-body">
                <!-- Content -->
                <view class="pure-cell-content">
                    <slot v-if="$slots.default"></slot>
                    <template v-else>
                        <!-- Title -->
                        <view class="pure-cell-title" v-if="$slots.title || title">
                            <slot name="title" v-if="$slots.title"></slot>
                            <text class="pure-cell-title-text" v-else>{{ title }}</text>
                        </view>

                        <!-- Desc -->
                        <view class="pure-cell-desc" v-if="$slots.desc || isDesc">
                            <slot name="desc" v-if="$slots.desc"></slot>
                            <text class="pure-cell-desc-text" v-else>{{ desc }}</text>
                        </view>

                        <!-- Arrow -->
                        <view class="pure-cell-arrow" v-if="$slots.arrow || arrow">
                            <slot name="arrow" v-if="$slots.arrow"></slot>
                            <pure-icon :name="arrowName" :mode="arrowName" v-else></pure-icon>
                        </view>
                    </template>
                </view>

                <!-- Tip -->
                <view class="pure-cell-tip" v-if="!tipOutside && ($slots.tip || isTip)">
                    <slot name="tip" v-if="$slots.tip"></slot>
                    <text class="pure-cell-tip-text" v-else>{{ tip }}</text>
                </view>
            </view>
        </view>

        <!-- Tip Outside -->
        <view class="pure-cell-tip-wrapper" v-if="tipOutside && ($slots.tip || isTip)">
            <!-- Placeholder -->
            <view class="pure-cell-element-placeholder" v-if="$slots.icon || icon">
                <!-- Icon -->
                <view class="pure-cell-icon">
                    <slot name="icon" v-if="$slots.icon"></slot>
                    <pure-icon :name="icon" :mode="iconMode" v-else></pure-icon>
                </view>
            </view>

            <!-- Tip -->
            <view class="pure-cell-tip">
                <slot name="tip" v-if="$slots.tip"></slot>
                <text class="pure-cell-tip-text" v-else>{{ tip }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["onClick"],
        computed: {
            // classes
            classes() {
                const classes = [];

                // 禁用
                if (this.disabled) classes.push(this.disabledClass);

                // 提示脱离内容
                if (this.tipOutside) classes.push(`pure-cell-tip-outside`);

                return classes;
            },

            // styles
            styles() {
                const styles = [];

                // 右侧图标旋转角度
                if (this.rotate) styles.push(`--pure-cell-arrow-rotate: ${this.rotate}deg;`);

                return styles;
            },

            // 是否展示Desc
            isDesc() {
                return this.desc !== undefined && this.desc !== null && this.desc !== "";
            },

            // 是否展示Tip
            isTip() {
                return this.tip !== undefined && this.tip !== null && this.tip !== "";
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用了
                if (this.disabled) return;

                this.$emit("onClick");
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
